<template>
    <mu-card class="search-able-user-list">
        <mu-card-header>{{assetsAlias}}充值</mu-card-header>
        <mu-card-media style="min-height:5px;">
            <mu-linear-progress v-show="is_search_user_info" />
        </mu-card-media>
        <mu-card-text>
            <mu-text-field v-model="search_text"
                           hintText="查询用户"
                           icon="search"
                           @input="delaySearch" />
        </mu-card-text>
        <mu-card-media class="user-list">
            <template v-for="user_info in searched_list">
                <user-info-card class="user-item"
                                :user-info="user_info"
                                :edit-tool-tip="'修改'+assetsAlias+'~'"
                                @click-edit="editAssets">
                </user-info-card>
            </template>
        </mu-card-media>
        <mu-dialog :open="is_show_edit_assets"
                   :title="'修改'+assetsAlias+'值'"
                   @close="is_show_edit_assets = false">
            <div v-if="selected_user">
                <mu-flexbox :gutter="5">
                    <mu-flexbox-item basis="1">
                        <mu-select-field style="width:8em;"
                                         v-model="assets_edit_mode"
                                         label="修改方式">
                            <mu-menu-item value="change"
                                          title="直接编辑" />
                            <mu-menu-item value="add"
                                          title="增加" />
                            <mu-menu-item value="cut"
                                          title="减少" />
                        </mu-select-field>
                    </mu-flexbox-item>
                    <mu-flexbox-item basis="2">
                        <mu-text-field :label="'请输入'+assetsAlias+'数量'"
                                       v-model="selected_user.assets_value"
                                       type="number" />
                    </mu-flexbox-item>
                </mu-flexbox>
            </div>
            <mu-flat-button slot="actions"
                            @click="is_show_edit_assets = false"
                            primary
                            label="取消" />
            <mu-flat-button slot="actions"
                            primary
                            :disabled="is_putting_data"
                            @click="submitChangeAssets">
                <mu-circular-progress v-if="is_putting_data"
                                      style="margin:0;position: relative;top: 5px;height:50px"
                                      :size="25" />
                <span v-else/>确认</span>
            </mu-flat-button>
        </mu-dialog>
    
    </mu-card>
</template>
<script>
import {
    getSex,
    formatDate,
    fetchServer,
} from '../../unit';
import UserInfoCard from "./UserInfoCard";
export default {
    props: ["assetsKey", "assetsAlias"],
    components: {
        UserInfoCard,
    },
    data() {
        return {
            search_text: "",
            is_search_user_info: false,
            searched_list: [],
            is_show_edit_assets: false,
            assets_edit_mode: "add",
            selected_user: {
                assets_value: 0
            },
            is_putting_data: false,
        }
    },
    created() {
        this.$watch("$route", async (current_route) => {
            const default_limit_num = 10;
            const search_text = (current_route.query.search_text || "").trim();
            if (search_text) {
                if (this.search_text !== current_route.query.search_text) {
                    this.search_text = current_route.query.search_text
                }
                this.searched_list.length = 0;
                this.is_search_user_info = true;
                const search_res = await fetchServer("/admin/user/search", {
                    query: {
                        search_text,
                        search_type: current_route.query.search_type,
                        limit_num: current_route.query.limit_num || default_limit_num,
                    }
                });
                this.is_search_user_info = false;
                this.searched_list = search_res.searched_list;
            } else {
                // 根据排序显示列表
                this.is_search_user_info = true;
                this.searched_list.length = 0;
                const search_res = await fetchServer("/admin/user/list", {
                    query: {
                        sort_by: this.assetsKey,
                        num: default_limit_num,
                    }
                });
                this.is_search_user_info = false;
                console.log(search_res)
                this.searched_list = search_res.list;
            }
        }, { immediate: true });
    },
    methods: {
        getSex: getSex,
        formatDate: formatDate,
        delaySearch(new_text) {
            clearTimeout(this.__delay_search);
            this.__delay_search = setTimeout(() => {
                this.search(new_text);
            }, 200)
        },
        search(search_text) {
            const router = this.$router;
            const current_route = this.$route;
            const query = Object.assign({}, current_route.query, { search_text });
            router.replace({
                path: current_route.path,
                query
            });
        },
        editAssets(user_info) {
            this.is_show_edit_assets = true;
            for (let k in user_info) {
                this.selected_user[k] = user_info[k]
            }
            if (this.assets_edit_mode === "change") {
                this.selected_user.assets_value = user_info[this.assetsKey]
            } else {
                this.selected_user.assets_value = 0;
            }
        },
        async submitChangeAssets() {
            const user_info = this.selected_user;
            if (user_info.id) {
                this.is_putting_data = true;
                try {
                    const new_user_info = await fetchServer("/admin/user/" + this.assetsKey, {
                        query: {
                            user_id: user_info.id,
                            change_mode: this.assets_edit_mode,
                            value: user_info.assets_value,
                        },
                        method: "PUT"
                    });
                    this.searched_list.some(user => {
                        if (user.id === new_user_info.id) {
                            for (var k in user) {
                                user[k] = new_user_info[k]
                            }
                            return true
                        }
                    });
                    if (this.selected_user.id === new_user_info.id) {
                        this.is_show_edit_assets = false;
                    }
                } catch (e) {
                    console.error("PUT ERROR", e);
                } finally {
                    this.is_putting_data = false;
                }
            }
        }
    }
}
</script>
<style>
.blur-10 {
    filter: blur(10px);
}

.as-bg {
    opacity: 0.6;
}

.user-list {
    display: flex;
    flex-wrap: wrap;
}

.user-item {
    margin: 10px;
    min-width: 16em;
    max-width: 30em;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1
}
</style>